<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量作用域 Variable Scope</title>
</head>
<script>
    var gVarialbe = '全局变量';

    (function () {
        'usr strict';
        function level1() {
            var self = this;
            var var1 = 'level1';
            console.log('1层函数...');
            console.log(gVarialbe);
            console.log(var1);
            function level2() {
                console.log('2层函数...');
                console.log(var1);
                console.log(gVarialbe);
                function level3() {
                    console.log('3层函数...');
                    var1 = '3';
                    console.log(var1);
                    console.log(gVarialbe);
                    function level4() {
                        console.log('4层函数...')
                        console.log(var1);
                        console.log(self);
                    }
                    level4();
                }
                level3();
                console.log('2层..');
                console.log(var1);
            }
            level2();
            console.log('1层..');
            console.log(var1);
            console.log(self);
        }
        level1();
        console.log('全局');
        //console.log(var1);
    }());

</script>
<style>
    body {
        width: 70%;
        margin: 5px auto;
    }

</style>

<body>
    <article>
        <h1>JavaScript 变量作用域</h1>
        <p>全局变量作用在整个程序中. 函数级变量作用在函数体及其嵌套的任何函数内.</p>
        <p>Global variables are defined throughout the program. Local variables are defined throughout the function in which
            they are declared, and also within any functions nested within that function.</p>
        <pre><code>
    var gVarialbe = '全局变量';

    (function () {
        'usr strict';
        function level1() {
            var self = this;
            var var1 = 'level1';
            console.log('1层函数...');
            console.log(gVarialbe);
            console.log(var1);
            function level2() {
                console.log('2层函数...');
                console.log(var1);
                console.log(gVarialbe);
                function level3() {
                    console.log('3层函数...');
                    var1 = '3';
                    console.log(var1);
                    console.log(gVarialbe);
                    function level4() {
                        console.log('4层函数...')
                        console.log(var1);
                        console.log(self);
                    }
                    level4();
                }
                level3();
                console.log('2层..');
                console.log(var1);
            }
            level2();
            console.log('1层..');
            console.log(var1);
            console.log(self);
        }
        level1();
        console.log('全局');
        //console.log(var1);
    }());
        </code></pre>
    </article>
</body>

</html>